<template>
  <div class="detailPdf_box">
    <!-- 标题部分 -->
    <div class="title_box">
      <span class="order_text">No.{{ dataObj.order.id }}</span>
      <h3>{{ $t('caseorder.yulan.yulan102') }}</h3>
      <span></span>
    </div>

    <!-- 患者信息部分 -->
    <div class="patient_box">
      <div>
        <span>{{ $t('caseorder.anli73') }}：</span>
        <span>{{ (dataObj.order && dataObj.order.patientName) || '--' }}</span>
      </div>

      <div>
        <span>{{ $t('caseorder.yulan.yulan6') }}：</span>
        <span v-if="dataObj.order && dataObj.order.orderDataType == 1" class="special_text">{{
          $t('caseorder.yulan.yulan7')
        }}</span>
        <span v-if="dataObj.order && dataObj.order.orderDataType == 2" class="special_text">{{
          $t('caseorder.yulan.yulan8')
        }}</span>
        <span v-if="dataObj.order && dataObj.order.orderDataType == 3" class="special_text">{{
          $t('caseorder.yulan.yulan9')
        }}</span>
      </div>

      <div>
        <span>{{ $t('caseorder.yulan.yulan3') }}：</span>
        <span>{{ (dataObj.order && dataObj.order.doctorName) || '--' }}</span>
      </div>

      <div>
        <span>{{ $t('caseorder.yulan.yulan4') }}：</span>
        <span>{{ (dataObj.order && dataObj.order.creatorDeptName) || '--' }}</span>
      </div>

      <div>
        <span>{{ $t('caseorder.yulan.yulan108') }}：</span>
        <span>{{ (dataObj.order && dataObj.order.skillDeptName) || '/' }}</span>
      </div>
    </div>

    <!-- 订单信息和备注部分 -->
    <div class="Order_info_box">
      <div>
        <div class="p_title"><span class="p_line"></span>{{ $t('caseorder.yulan.yulan102') }}</div>
        <div class="order_content">
          <div>
            <span class="order_item_title">{{ $t('caseorder.yulan.yulan104') }}：</span>
            <span class="order_item_info">{{
              (dataObj.order && dataObj.order.creatorName) || '--'
            }}</span>
          </div>
          <div>
            <span class="order_item_title">{{ $t('add.add168') }}：</span>
            <span class="order_item_info">{{
              dataObj.order && dataObj.order.designConfirmState == 1
                ? $t('add.add006')
                : $t('add.add005')
            }}</span>
          </div>

          <div>
            <span class="order_item_title">{{ $t('caseorder.yulan.yulan105') }}：</span>
            <span class="order_item_info">{{
              (dataObj.order && dataObj.order.orderCreateTime) || '--'
            }}</span>
          </div>

          <div>
            <span class="order_item_title">{{ $t('caseorder.yulan.yulan111') }}：</span>
            <span class="order_item_info">{{
              (dataObj.order && dataObj.order.orderStatusName) || '--'
            }}</span>
          </div>

          <div>
            <span class="order_item_title">{{ $t('caseorder.yulan.yulan107') }}：</span>
            <span class="order_item_info">{{
              (dataObj.order && dataObj.order.updaterName) || '--'
            }}</span>
          </div>

          <div>
            <span class="order_item_title">{{ $t('caseorder.yulan.yulan106') }}：</span>
            <span class="order_item_info">{{
              (dataObj.order && dataObj.order.updateDate) || '--'
            }}</span>
          </div>

          <div style="width: 100%">
            <span class="order_item_title">{{ $t('caseorder.yulan.yulan112') }}：</span>
            <span class="order_item_info"
              >{{
                (dataObj.order && dataObj.order.designDemand) || '--'
              }}
            </span>
          </div>

          
        </div>
      </div>
      <div>
        <div class="p_title"><span class="p_line"></span>{{ $t('caseorder.yulan.yulan47') }}</div>
        <div class="order_content" style="height: calc(100% - 80px)">
          <!-- <el-input v-show="!loading" type="textarea" :rows="3"
              :placeholder="$t('caseorder.yulan.yulan92') + $t('caseorder.yulan.yulan64')" maxlength="200" show-word-limit
              v-model="notes">
            </el-input>

            <div v-show="loading">
              <p>{{ notes }}</p>
            </div> -->
          <el-input
            v-show="!loading"
            type="textarea"
            :rows="6"
            :placeholder="$t('caseorder.yulan.yulan92') + $t('caseorder.yulan.yulan64')"
            maxlength="200"
            show-word-limit
            v-model="notes"
          >
          </el-input>
          <div
            v-show="loading"
            style="
              height: 100%;
              
              border: 1px solid #bbbbbb;
              border-radius: 4px;
              padding: 5px 15px;
            "
          >
            <p>{{ notes }}</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 牙位信息 -->
    <div class="dental_position_info_box">
      <div>
        <div class="p_title"><span class="p_line"></span>{{ $t('caseorder.yulan.yulan128') }}</div>
        <div class="order_content">
          <div class="order_img">
            <el-image v-if="dataObj.order && dataObj.order.imgs" :src="imgUrl" fill="contain" />
            <div v-if="!dataObj.order || !dataObj.order.imgs" style="color: #e59740">
              {{ $t('caseorder.yulan.yulan103') }}
            </div>
          </div>
          <div class="table_box">
            <el-table :data="dataObj.mouthList" style="width: 100%" size="mini">
              <el-table-column
                align="center"
                prop="mouthNo"
                :label="$t('caseorder.yulan.yulan116')"
                min-width="25%"
                show-overflow-tooltip
              />
              <el-table-column
                align="center"
                prop="repairType"
                :label="$t('caseorder.yulan.yulan117')"
                min-width="25%"
                show-overflow-tooltip
              />
              <el-table-column
                align="center"
                prop="plantingType"
                v-if="dataObj.order && dataObj.order.orderDataType == 2"
                :label="$t('caseorder.yulan.yulan130')"
                min-width="25%"
                show-overflow-tooltip
              />
              <el-table-column
                align="center"
                prop="materials"
                :label="$t('caseorder.yulan.yulan118')"
                min-width="25%"
                show-overflow-tooltip
              />
            </el-table>
          </div>
        </div>
      </div>
    </div>

    <!-- 截图部分 -->
    <div class="screenshot_box">
      <div class="p_title"><span class="p_line"></span>{{ $t('caseorder.yulan.yulan114') }}</div>
      <div v-if="mouthImgs && mouthImgs.length > 0" class="order_jietu">
        <div v-for="(item, index) in mouthImgs" :key="item.url" class="screenshots_item">
          <img :src="item.url" />
          <div>{{ item.typeName }}</div>
        </div>
      </div>

      <div v-else style="color: #e59740">
        {{ $t('caseorder.yulan.yulan103') }}
      </div>
    </div>
  </div>
</template>
  
<script>
import Screenshot from '@/views/order/common/Screenshot';
export default {
  // 订单详情
  name: 'detailPdf',
  props: {
    dataObj: Object,
    imgUrl: {
      type: String,
    },
    isExamine: {
      type: String,
    },
    mouthImgs: {
      type: Array,
    },
    loading: {
      type: Boolean,
    },
  },
  components: {
    Screenshot,
  },

  data() {
    return {
      notes: '',
    };
  },

  mounted() {
 
  },

  methods: {},
};
</script>
  
<style lang="scss" scoped>
.detailPdf_box {
  width: 100%;
  height: 100%;
  margin-bottom: 100px;
  padding: 10px;
  .el-textarea {
    height: 100% !important;
    ::v-deep textarea {
      height: 100% !important; 
    }
  }
  > div {
  }
  .p_title {
    font-size: 26px;
    color: #083e67;
    font-weight: bold;
    display: flex;
    align-items: center;
    margin: 20px 0 30px 0;
    height: 30px;
    .p_line {
      display: inline-block;
      width: 6px;
      border-radius: 4px;
      height: 30px;
      background: #083e67;
      margin-right: 10px;
    }
  }
  .title_box {
    height: 60px;
    background: #083e67;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    border-radius: 15px 15px 0px 0px;
    .order_text {
      color: #eeeeee;
      font-size: 16px;
    }
    h3 {
      color: #eeeeee;
      font-size: 30px;
      font-weight: 500;
    }
  }
  .patient_box {
    padding: 0 10px;
    border-bottom: 1px solid #bbbbbb;
    display: flex;
    align-items: center;

    > div {
      width: 20%;
      padding: 10px 0;
      color: #252121;
    }
  }
  .Order_info_box {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    > div {
    }
    > div:nth-child(1) {
      width: 60%;
      .order_content {
        border: 1px solid #bbbbbb;
        border-radius: 4px;
        display: flex;
        flex-wrap: wrap;
        padding: 10px;
        min-height: 150px;
        height: auto;

        > div {
          width: 50%;
          line-height: 30px;
        }
      }
    }
    > div:nth-child(2) {
      width: 39%;
      ::v-deep .el-textarea__inner {
        border: 1px solid #bbbbbb !important;
        height: 150px;
      }
    }
  }
  .dental_position_info_box {
    .order_content {
      display: flex;

      .order_img {
        width: 40%;
        height: 350px;
        text-align: center;
        .el-image {
          height: 100%;
        }
      }
      .table_box {
        width: 60%;
        margin-left: 10px;
        ::v-deep th {
          background: #ebebeb;
          color: #252121;
          font-size: 16px;
          font-weight: 550;
        }
        ::v-deep td {
          font-size: 14px;
        }
        ::v-deep .el-table th.el-table__cell.is-leaf,
        ::v-deep .el-table td.el-table__cell {
          border-bottom: 1px solid #bbbbbb;
        }
      }
    }
  }
  .screenshot_box {
    .order_jietu {
      width: 100%;
      min-height: 145px;
      // margin-top: 40px;
      margin-bottom: 62px;
      // padding-left: 40px;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      gap: 40px;
      // margin-left: 35px;

      ::v-deep &.el-row {
        &:before,
        &:after {
          display: none;
        }
      }
    }
  }

  .screenshots_item {
    //width: 32%;
    position: relative;
    border-radius: 0px 14px 0px 0px;
    overflow: hidden;

    img {
      width: 380px;
      height: 246px;
      //height: 100%;
      object-fit: cover;
    }

    div {
      // width: 71px;
      padding: 0 10px;
      height: 41px;
      line-height: 41px;
      text-align: center;
      border-radius: 0px 10px 0px 10px;
      position: absolute;
      right: 0;
      top: 0;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #ffffff;
      background: #e59740;
    }
  }
}
</style>
  